<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { getTime } from '@/utils/time';
import { baseImgPath } from '@/utils/env';
import { useDiary } from '@/hooks/diaryHook';
import { useRouter } from 'vue-router';
import Empty from '@/components/common/empty.vue';
import { useCountStore } from '@/stores/count';

const router = useRouter();

const { getDiaryList, diaryList, getWeatherUrl, parsePictures, diaryDetail, getDiaryDetail, diaryCount } = useDiary();
const countStore = useCountStore();
// 监听文章总数变化
watch(() => diaryCount.value, (newCount) => {
  countStore.diaryCount =newCount;
});

// 跳转到随笔详情页
const diaryMore = () => {
    router.push({ path: '/diary' })
}

const props = defineProps({
    pageSize: {
        type: Number,
        default: 3,
    },
    searchTerm: {
        type: String,
        default: '',
    },
    isChangeSmall: {
        type: Boolean,
        default: false,
    },

})

const request = {
    pageSize: props.pageSize,
    nowPage: 1,
    searchTerm: props.searchTerm,
    count: true,
}


onMounted(async () => {
    getDiaryList(request);
    // setTimeout(() => {
    //     getDiaryDetail(diaryList.value[0].id);
    // }, 100);
})

watch(diaryList, (newList) => {
    if (newList && newList.length > 0) {
        getDiaryDetail(newList[0].id);
    }
}, { immediate: true });
</script>

<template>
    <div class="sm:w-[300px] md:w-[400px] lg:w-[640px] xl:w-[1300px]">
        <!-- 顶部 -->
        <div class="flex items-center justify-between w-full border-b border-dashed border-gray-300 mb-5">
            <div class="flex items-center">
                <svg class="icon--large" aria-hidden="true">
                    <use xlink:href="#icon-bianqian"></use>
                </svg>
                <h1 class="text-xl font-semibold text-gray-500"> 最新随笔</h1>
            </div>
            <div>
                <div class="flex items-center">
                    <svg class="icon--large" aria-hidden="true">
                        <use xlink:href="#icon-quanbu"></use>
                    </svg>
                    <h1 class="text-xl font-semibold text-gray-500 hover:text-lime-400" @click="diaryMore"> Mroe</h1>
                </div>
            </div>
        </div>
        <!-- 随笔内容 -->
        <div class="w-full flex justify-center items-center ">
            <div class=" flex mr-10 flex-col w-full">
                <!-- 随笔卡片 -->
                <div v-for="item in diaryList" :key="item.id" class="flex w-full m-4 shadow-xl
                sm:h-[100px]
                md:h-[120px]  
                lg:h-[150px]" @click="getDiaryDetail(item.id)">
                    <!-- 标题 -->
                    <div
                        class="w-1/5 h-full  flex flex-col justify-center items-center bg-amber-100 border-r  border-dashed">
                        <h1 class="sm:text-base md:text-lg lg:text-2xl font-bold">{{ item.title }}</h1>
                    </div>
                    <!-- 内容 -->
                    <div class="w-4/5 h-full bg-amber-100">
                        <!-- 内容顶部 -->
                        <div class="flex justify-between items-center px-4 pt-2 ">
                            <span class="text-sm md:text-base lg:text-lg textColor-1">{{ getTime(item.created_at)
                                }}</span>
                            <img :src="getWeatherUrl(item.weather_id)" alt="天气" class="w-5 h-5" />
                        </div>
                        <!-- 随笔内容 -->
                        <div class=" indent-8 underline underline-offset-4 overflow-hidden text-ellipsis line-clamp-3 
                        px-4
                        lg:px-8">
                            <p class="sm:text-sm md:text-base lg:text-xl">{{ item.content }}</p>

                        </div>
                    </div>
                    <!-- 图片 -->
                    <div v-show="!props.isChangeSmall" class="relative h-full">
                        <div class="relative w-full h-full group">
                            <div v-for="(img, index) in parsePictures(item.picture)" :key="img.id"
                                class="absolute w-[150px] h-full transition-all duration-500 ease-out" :class="[
                                    index === 0 ? 'z-30 rotate-0' : '',
                                    index === 1 ? 'z-20 rotate-3 translate-x-2 translate-y-2' : '',
                                    index === 2 ? 'z-10 rotate-6 translate-x-4 translate-y-4' : '',
                                    index === 3 ? 'z-5 rotate-12 translate-x-8 translate-y-8' : '',

                                    'group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0',
                                    index === 0 ? 'group-hover:translate-x-0' : '',
                                    index === 1 ? 'group-hover:translate-x-[160px]' : '',
                                    index === 2 ? 'group-hover:translate-x-[320px]' : '',
                                    index === 3 ? 'group-hover:translate-x-[480px]' : ''

                                ]">
                                <img :src="baseImgPath + '/' + img.url" alt="图片" loading="lazy"
                                    class="w-full h-full object-cover rounded-lg shadow-xl border-2 border-white" />
                            </div>
                            <div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 详情区 -->
            <div v-show="!props.isChangeSmall" v-if="diaryDetail.id"
                class="flex flex-col bg-amber-100 w-full h-[700px] items-center">
                <!-- 顶部 -->
                <div class="flex justify-between w-full px-10 pt-8 pb-5 mb-5">
                    <!-- 标题 -->
                    <div>
                        <h1 class="text-4xl font-bold">{{ diaryDetail.title }}</h1>
                    </div>
                    <!-- 时间天气 -->
                    <div class="flex items-center space-x-2">
                        <span class=" text-lg textColor-1">{{ getTime(diaryDetail.created_at) }}</span>
                        <img :src="getWeatherUrl(diaryDetail.weather_id)" alt="天气" class="w-5 h-5" />

                    </div>
                </div>
                <!-- 装饰线 -->
                <div class="w-[90%] border-t-3"></div>

                <!-- 内容 -->
                <div class="relative w-full h-full px-10 py-6">

                    <div class="absolute top-5 left-10 bottom-5 right-10 pointer-events-none" style="
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 45px,      /* 线以上的透明区 */
        #cbd5e1 45px 46px        /* 第 40px 画 1px 线 */
      );
    "></div>
                    <p class="text-2xl leading-[46px] indent-12 overflow-hidden text-ellipsis line-clamp-11">{{
                        diaryDetail.content }}</p>
                </div>
            </div>
        </div>
        <!-- 暂无数据 -->
        <div v-if="diaryList.length === 0">
            <Empty />
        </div>
    </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}
</style>
